<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>组件之事件监听</title>
  </head>
  <body>
    <div id="app1">
      <div v-bind:style="{ fontSize: postFontSize + 'em'}">
        <button-large v-on:large-event="postFontSize += $event"
          >看看</button-large
        >
        <p>测试内容</p>
      </div>
      <custom-input v-model="message"> </custom-input>
      <input
        type="text"
        v-bind:value="message"
        v-on:input="message = $event.target.value"
      />
      <p>{{ message }}</p>
    </div>
    
    <h4>双向绑极简实现</h4>
    <input type="text" id="txt">
    <span id="para">2312</span>

    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
    <script>
      Vue.component("button-large", {
        template: `<button v-on:click="$emit('large-event', 0.1)">放大<slot></slot></button>`
      });
      Vue.component("custom-input", {
        props: ["value"],
        template: `
          <input
            type="text"
            v-bind:value="message"
            v-on:input="$emit('input', $event.target.value)"
          />
          
        `
      });
      var app1 = new Vue({
        el: "#app1",
        data: {
          postFontSize: 1,
          message: "hhahhha"
        }
      });

      var txt = document.getElementById('txt')
      var para = document.getElementById('para')
      var myObj = {}
      Object.defineProperty(myObj, 'msg', {
        set: function (newValue) { 
    
          txt.value = newValue;
          para.innerText = newValue;
        },
        // get: function (newValue, oldValue) {  }
      });
      txt.addEventListener('keyup', function(e) {
        myObj.msg = e.target.value;
      })
    </script>
  </body>
</html>
